<template>
  <div>
    <div id = "input">
      <div class="input">
        <el-input v-model="category.name" placeholder="Please input" />
      </div>
      <div class = "buttons">
        <el-button type="primary" @click="search()">搜索</el-button>
      </div>
      <div class = "buttons">
        <el-button type="success" @click="addCategory">新增</el-button>
      </div>
    </div>
    <el-table v-loading="loading" :data="dataList" stripe style="width: 100%">
      <el-table-column prop="id" label="编号id" width="180" />
      <el-table-column prop="name" label="分类名称" width="180" />
      <el-table-column label="操作" >
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="updateRow(scope.row.id, scope.row.name)">修改</el-button>
          <el-button type="text" size="small" @click="deleteRow(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <el-dialog :visible="CategoryFormVisible" title="修改分类" :append-to-body="true">
      <el-form :model="category">
        <el-form-item label="分类名称">
          <el-input v-model="category.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="CategoryFormVisible = false">取消</el-button>
        <el-button type="primary" @click="update()">提交</el-button>
      </span>
      </template>
    </el-dialog>

    <el-dialog :visible="addFormVisible" title="新增分类" :append-to-body="true">
      <el-form :model="category">
        <el-form-item label="分类名称">
          <el-input v-model="category.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="addFormVisible = false">取消</el-button>
        <el-button type="primary" @click="add()">提交</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "category",
  data() {
    return {
      dataList: [],
      deleteUrl: 'http://localhost:9000/category/delete',
      updateUrl: 'http://localhost:9000/category/update',
      requestUrl: 'http://localhost:9000/category/list',
      addUrl: 'http://localhost:9000/category/add',
      searchUrl: 'http://localhost:9000/category/search',
      loading: false,
      CategoryFormVisible: false,
      addFormVisible: false,
      category: {
        id: 0,
        name: ''
      }
    }
  },
  mounted() {
    this.load();
  },
  methods:{
    load:function () {
      // eslint-disable-next-line no-unused-vars
      axios.get(this.requestUrl).then((res) => {
          if(res.data.code == 0){
            console.log(res);
            this.dataList = res.data.data;
            this.loading = false;
          }else{
            this.dataList = [];
            this.loading = true;
          }
      })
    },
    search:function () {
      axios.post(this.searchUrl, this.category).then((res) => {
        if(res.data.code === 0){
          this.dataList = res.data.data
          this.$message.success("搜索成功")
        }else{
          this.$message.error("搜索失败")
        }
      })
    },
    add:function () {
      axios.post(this.addUrl, this.category).then((res) => {
        if(res.data.code === 0){
          this.load();
          this.addFormVisible = false;
          this.$message.success("添加成功！")
        }else{
          this.addFormVisible = false;
          this.$message.error("添加失败！"+res.data.msg)
        }
      })
    },
    addCategory:function () {
      this.addFormVisible = true
    },
    updateRow:function (id, name) {
      this.CategoryFormVisible = true
      this.category.id = id
      this.category.name = name

    },
    update:function (){
      axios.post(this.updateUrl, this.category).then((res) => {
          if(res.data.code === 0){
            this.load();
            this.CategoryFormVisible = false
            this.$message.success("更新成功！")
          }else{
            this.CategoryFormVisible = false
            this.$message.error("更新失败")
          }
      })
    },
    deleteRow:function (id){
      this.category.id = id
      axios.post(this.deleteUrl, this.category).then((res) => {
        if(res.data.code == 0){
          this.load();
          this.$message.success("删除成功！")
        }else{
          this.$message.error(res.data.msg)
        }
      })
    }
  }
}
</script>

<style scoped>
.input{
  width: 150px;
  margin-right: 20px;
  float: left;
}
.buttons{
  float: left;
  margin-right: 15px;
}
</style>
